<template>
    <div class="flex">
        <div class="avatar">
            <el-avatar :size="50" src="https://q1.qlogo.cn/g?b=qq&nk=2770063826&s=100"></el-avatar>
        </div>
        <div>
            <div>
                <div class="nickname">
                    <span>Jixer</span>
                    <span>发消息</span>
                </div>
                <div class="introduce">
                    <span>我最懂GTA6了[吃瓜]</span>
                </div>
            </div>
            <div class="btn">
                <el-button size="small" round>充电</el-button>
                <el-button type="primary" size="small" round>关注</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "VideoAuthor"
}
</script>

<style scoped>
.flex {
    display: flex;
    height: 90px;
    box-sizing: border-box;
}

.avatar{
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nickname {
    font-size: 15px;
    color: #18191C;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 12px;
}

.introduce {
    margin-top: 2px;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    color: #9499A0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn {
    display: flex;
    margin-top: 10px;
}
</style>